<template>
    <div>
      <el-col :span="24">
        <!--<div class="head-wrap">-->
          <!--<p>ElementUI头部</p>-->

          <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" @select="handleSelect"  router>
            <el-menu-item index="/">首页</el-menu-item>
            <el-submenu index="2">
              <template slot="title">布局</template>
              <el-menu-item index="/layoutTest">layoutTest</el-menu-item>
              <el-menu-item index="/container">container</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">按钮</template>
              <el-menu-item index="/buttonTest">按钮</el-menu-item>
            </el-submenu>
            <el-menu-item index="/formTest">表单</el-menu-item>
            <el-menu-item index="/tableTest">表格</el-menu-item>

            <el-menu-item index="/tabTest">Tab</el-menu-item>
          </el-menu>
          <div class="line"></div>

        <!--</div>-->
      </el-col>

    </div>
</template>

<script>
    export default {
        name: 'VHeader',//组件名称
        props: {},
        components: {},
      data() {
        return {
          activeIndex: '1',
          activeIndex2: '1'
        };
      },
      methods: {
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
        }
      },
        computed: {
            // name() {
            //     return this.data
            // }
        },
        watch: {
            data(newValue, oldValue) {

            }
        },

        filters: {
            fnName: function (value) {
                return value
            }
        }
    }
</script>

<style scoped>
  .head-wrap{
    background-color: cadetblue;
    color: #fff;
    /*line-height: 60px;*/
    width: 100%;
    margin-top: -22px;
    font-size: 1.4rem;

  }


</style>
